<template>
    <!-- 退保申请 录入 模块 -->
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="line-height: 36px;">退保申请</span>                
                <el-button type="primary" style="float:right" v-if="type!='查看'" @click="submit">
                    提交
                </el-button>
            </div>

            <el-form :inline="true" class="demo-form-inline" v-if="type!='退保申请'">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="审核:" label-width="180px">
                            <el-select v-model="model.BACKSALE_CHECKSTATE" placeholder="请审核" :disabled="type=='退保修改'">
                                <el-option label="审核通过" value="需退保确认"></el-option>
                                <el-option label="审核不通过" value="需退保修改"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否全款:" label-width="180px" >
                            <el-radio-group v-model="model.BACKSALE_TYPE" :disabled="type=='退保修改'"> 
                            <el-radio class="radio"  label="全款">全款</el-radio>
                            <el-radio class="radio"  label="非全款">非全款</el-radio>
                             </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="审核意见: " label-width="180px">
                            <el-input type="textarea" v-model="model.BACKSALE_CHECKMESSAGE" style="width:300px;" :disabled="type=='退保修改'"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <el-card class="box-card">

                <el-form :inline="true" class="demo-form-inline">
                 
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="投保单号" label-width="180px">
                                <el-input v-model="model.SALESDETAIL_ID" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="退保申请时间" label-width="180px">
                                <el-date-picker type="date" placeholder="选择日期" v-model="model.BACKSALE_TIME" :disabled="this.type=='退保审核'"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="保险合同变更申请书: " label-width="180px">
                                <el-button type="primary" class="fileselect"  v-if="type!='退保审核'">
                                    <input type="file" @change="upload('BACKSALE_APPLICATIONDOC',$event,1)" value="" id="fileup1"> 上传附件
                                </el-button>
                                 <el-button type='primary' @click="dowload('BACKSALE_APPLICATIONDOC')" v-else>
                                        下载
                                    </el-button>   
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="保单原件: " label-width="180px">
                                <el-button type="primary" class="fileselect" v-if="type!='退保审核'">
                                    <input type="file" @change="upload('BACKSALE_POLICYDOC',$event,2)" value="" id="fileup2"> 上传附件
                                </el-button>
                                 <el-button type='primary' @click="dowload('BACKSALE_POLICYDOC')" v-else>
                                        下载
                                    </el-button>   
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">

                        <el-col :span="12">
                            <el-form-item label="发票原件: " label-width="180px">
                                <el-button type="primary" class="fileselect"  v-if="type!='退保审核'">
                                    <input type="file" @change="upload('BACKSALE_INVOICEOLDDOC',$event,3)" value="" id="fileup3"> 上传附件
                                </el-button>
                                 <el-button type='primary' @click="dowload('BACKSALE_INVOICEOLDDOC')" v-else>
                                        下载
                                    </el-button>   
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="医疗保险救援卡: " label-width="180px">
                                <el-button type="primary" class="fileselect"  v-if="type!='退保审核'" >
                                    <input type="file" @change="upload('BACKSALE_CARDDOC',$event,4)" value="" id="fileup4"> 上传附件
                                </el-button>
                                 <el-button type='primary' @click="dowload('BACKSALE_CARDDOC')" v-else>
                                        下载
                                    </el-button>   
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="20">
                            <el-form-item label="退保申请详情: " label-width="180px">
                                <el-input type="textarea" v-model="model.BACKSALE_CONTENT" style="width:300px;" :disabled="this.type=='退保审核'"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-form>
            </el-card>
        </el-card>
    </div>
</template>

<script>
import api from "@/js/api";
import getid from "@/js/getid";
export default {
  data() {
    return {
      model: {
        BACKSALE_ID: "",
        BACKSALE_SALENUMBER: "",
        BACKSALE_TIME: "",
        BACKSALE_TYPE: "",
        BACKSALE_MONEY: "",
        BACKSALE_POLICYDOC: "",
        BACKSALE_APPLICATIONDOC: "",
        BACKSALE_INVOICEOLDDOC: "",
        BACKSALE_CARDDOC: "",
        BACKSALE_CERTIFICATEDOC: "",
        BACKSALE_INVOICEDOC: "",
        BACKSALE_CONTENT: "",
        SALESDETAIL_ID: "",
        BACKSALE_CHECKSTATE: "",
        BACKSALE_CHECKMESSAGE: ""
      }
    };
  },
  props: {
    type: {
      type: String,
      default: "申请"
    },
    content: {
      type: Object,
      default: { SALESDETAIL_ID: "", BACKSALE_SALENUMBER: "" }
    }
  },
  methods: {
    submit() {
      //新增
      if (this.type != "退保审核") {
        this.model.BACKSALE_CHECKSTATE = "需退保审核";
      }
      let that=this;
      if (this.type == "退保申请") {
        this.model.BACKSALE_ID = getid.getid();
        api.BACKSALEAdd(this, this.model);
      } else {
        api.BACKSALEUpdate(this, this.model,function(msg){
         that.$notify.success({
                title: '成功',
                message: '修改成功'
            });
            that.$emit('close');
        });
      }
    },
    //文件上传
    upload(name, event, id) {
      let file = event.target.files[0];
      if (file) {
        const formData = new FormData();
        formData.append("file", file);
        let that = this;
        api.uploadFile(this, formData, function(msg) {
          eval(document.getElementById("fileup" + id)).value = "";
          that.model[name] = msg.Result.FilesList[0];
        //   console.log(that.model);
        });
      }
    },
    //获取退报数据
    getBackDate() {
      let that = this;
      api.BACKSALEGetOne(that, { Id: this.content.SALESDETAIL_ID }, function(
        msg
      ) {
        that.model = msg.Result;
        that.model.BACKSALE_TIME = that.model.BACKSALE_TIME + "Z"; //告诉他 这是标准标准时间
        that.model.BACKSALE_CHECKSTATE = "";
        if (that.type == "退保审核") {
          that.model.BACKSALE_CHECKMESSAGE = "";
          that.model.BACKSALE_TYPE = "";
        }
      });
    },
    dowload(name) {
      var url = this.model[name];
      window.open(api.download(url));
      //   console.log(url);
    }
  },
  created() {
    // console.log(this.content);
    this.model.SALESDETAIL_ID = this.content.SALESDETAIL_ID;
    this.model.BACKSALE_SALENUMBER = this.content.SALESDETAIL_INSURANCENUMBER;
    // console.log(this.type);
    if (this.type != "退保申请") {
      this.getBackDate();
    }
  }
};
</script>

<style>

</style>
